<template>
  <div>
    <main>
      <div class="search">
        <div class="lookover">查看作业批改</div>
        <div class="name">姓名：{{ nickname }}</div>
      </div>

      <!-- 题目类型 -->
      <div class="exe_type">
        {{ exerciseDetail.typeCode }}{{ exerciseDetail.name }}
      </div>

      <div class="exer_title">
        <span class="idx"
          >{{ titleIndex - 0 > 9 ? titleIndex - 0 : "0" + (titleIndex - 0) }}.
        </span>
        <span class="bt">{{ exerciseDetail.title }}</span>
        <span class="tags">
          <el-tag class="jj" v-if="exerciseDetail.isJt == 1">机经</el-tag>
          <el-tag class="yc" v-if="exerciseDetail.isYc == 1">预测</el-tag>
          <el-tag class="ttNum">{{ exerciseDetail.titleNumber }}</el-tag>
        </span>
      </div>

      <!-- 题目 -->
      <div>
        <!-- 各题型   $event接收传递过来的参数-->
        <ExeType
          @submitComment="submitComment($event, exerciseDetail.id)"
          @toPrevDetail="toPrevDetail"
          @toNextDetail="toNextDetail"
          @noPrev="noPrev"
          @noNext="noNext"
          :exerciseDetail="exerciseDetail"
          :nickname="nickname"
        ></ExeType>
      </div>
    </main>
  </div>
</template>

<script>
import ExeType from './ExeType'
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  components: {
    ExeType,
  },
  data () {
    return {
      nickname: '',
      titleIndex: '',
      answerList: [],
      exerciseDetail: {}
    }
  },
  created () {
    this.exerciseDetail = JSON.parse(sessionStorage.getItem('detail'))
    this.nickname = this.$route.query.name
    this.titleIndex = sessionStorage.getItem('idx')
  },
  mounted () {
  },
  methods: {
    noPrev () {
      this.$msg.info('没有上一题了!')
    },
    noNext () {
      this.$msg.info('没有下一题了!')
    },
    toNextDetail () {
      this.$router.push('/CheckWork/ExerciseDetail?name=' + this.nickname)
      var index = sessionStorage.getItem('index')
      var workList = JSON.parse(sessionStorage.getItem('workList'))
      // var idx = sessionStorage.getItem('index')
      // sessionStorage.setItem('idx', index > 9 ? index : '0' + index)
      // sessionStorage.setItem('detail', JSON.stringify(workList[index]))

      sessionStorage.setItem('index', index - 0 + 1)
      sessionStorage.setItem('idx', (index - 0 + 1) > 9 ? (index - 0 + 1) : '0' + (index - 0 + 1))
      sessionStorage.setItem('detail', JSON.stringify(workList[index - 0 ]))
      this.$router.go(0)
    },

    toPrevDetail () {
      this.$router.push('/CheckWork/ExerciseDetail?name=' + this.nickname)
      var index = sessionStorage.getItem('index')
      var workList = JSON.parse(sessionStorage.getItem('workList'))
      // var idx = sessionStorage.getItem('index')


      sessionStorage.setItem('index', index - 1)
      sessionStorage.setItem('idx', (index - 1) > 9 ? (index - 1) : '0' + (index - 1))
      sessionStorage.setItem('detail', JSON.stringify(workList[index - 2]))
      this.$router.go(0)
    },

    submitComment (e, id) {
      console.log(e, id);
      sendPost(api.submitComments, {
        id: id,
        comments: e
      }).then(res => {
        console.log(res);
        if (res.success == '0') {
          this.$msg.success('批注成功!')
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
main {
  width: 75rem;
  margin: auto;
  word-break: break-word;
  /deep/.el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }
  .search {
    margin-top: 30px;
    height: 4rem;
    line-height: 4rem;
    background-color: #f1f1f1;
    display: flex;
    margin: 1.5rem 0;
    .lookover {
      font-size: 1.25rem;
      font-weight: bold;
      padding: 0 1.25rem;
      color: #333;
    }
    .name {
      font-size: 1.25rem;
      font-weight: bold;
      padding-right: 1.25rem;
      color: #333;
    }
  }
  .exe_type {
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: left;
    font-size: 1.125rem;
    padding-left: 1.25rem;
    font-weight: bold;
  }
  .exer_title {
    display: flex;
    height: 3.125rem;
    line-height: 3.125rem;
    background-color: #f7f7f7;
    color: #333;
    font-size: 1rem;
    padding: 0 1.25rem;
    .idx {
      width: 2.5rem;
      text-align: left;
    }
    .bt {
      width: 37.5rem;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tags {
      display: inline-block;
      margin-left: 2rem;
      width: 16.25rem;
      .el-tag {
        margin: 0 6px;
        color: #fff;
        border: none;
        font-size: 1rem;
        line-height: 2rem;
      }
      .jj {
        background-color: #ff9b4f;
      }
      .yc {
        background-color: #00cccc;
      }
      .ttNum {
        background-color: #94d0f7;
      }
    }
    .list_title {
      display: inline-block;
      width: 30.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
